<template>
    <div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in newsList" :key="item.id">
                <router-link :to="'/home/newsInfo/' + item.id">
                    <img class="mui-media-object mui-pull-left" :src="item.img">
                    <!-- <img class="mui-media-object mui-pull-left" src="../../assets/images/newList7.jpg"> -->
                    <div class="mui-media-body">
                        <h1>{{item.title}}</h1> 
                        <p class='mui-ellipsis'>
                            <span>发表时间：{{item.time | dateFormat}}</span>
                            <span>点击{{item.like}}次</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            newsList: [{
                id: 1,
                img: './static/images/newList3.jpg',
                title: '幸福',
                time: '2018-08-08 08:08:08',
                like: 0
            }, {
                id: 2,
                img: './static/images/newList7.jpg',
                title: '痴情',
                time: '2018-08-08 08:08:08',
                like: 1
            }, {
                id: 3,
                img: './static/images/newList5.jpg',
                title: '遗憾',
                time: '2018-08-08 08:08:08',
                like: 0
            }, {
                id: 4,
                img: './static/images/newList8.jpg',
                title: '汪汪',
                time: '2018-08-08 08:08:08',
                like: 2
            }]
        }
    }
}
</script>

<style scoped>
    .mui-table-view h1{
        font-size: 14px;
    }
    .mui-ellipsis {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
    }
</style>
